<template>
  <div class="orders">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-row>
        <el-input
          style="width:500px;"
          placeholder="请输入内容"
          @click="getOrdersList"
          v-model="queryInfo.query"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-row>
      <el-table :data="ordersList" border>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.order_pay == '0'">未付款</el-tag>
            <el-tag type="success" v-else>已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"></el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">{{scope.row.create_time | filterTime}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" :cc="scope" type="primary" icon="el-icon-edit"></el-button>
            <el-button
              size="mini"
              @click="searchOgistics"
              type="success"
              icon="el-icon-location-information"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 物流信息弹出框 -->
    <el-dialog title="查看物流进度" :visible.sync="dialogLog">
      <el-steps direction="vertical" :active="0">
        <el-step
          v-for="(item,index) in logisticsList"
          :key="index"
          :title="item.time"
          :description="item.context"
        ></el-step>
      </el-steps>
    </el-dialog>
  </div>
</template>
<script>
import orders from "./orders-mixins";
export default {
  mixins: [orders]
};
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 15px;
}
.el-row {
  margin-bottom: 15px;
}
.block {
  margin-top: 15px;
}
</style>
